<!--小额批量代付业务付款-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <el-row>
        <el-col :span="7">
          <el-form-item label="交易流水号" label-width="80px" prop="bepsId">
            <el-input placeholder="请输入交易流水号" v-model="form.bepsId" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="付款人账号" label-width="80px" prop="payerCount">
            <el-input placeholder="请输入付款人账号" v-model="form.payerCount" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="付款人名称" label-width="80px" prop="payerName">
            <el-input placeholder="请输入付款人名称" v-model="form.payerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="7">
          <el-form-item label="报文标识号" label-width="80px" prop="MessageNum">
            <el-input placeholder="请输入报文标识号" v-model="form.MessageNum" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="核验标识" label-width="80px" prop="verifiFlag">
            <el-select v-model="form.verifiFlag" placeholder="">
              <el-option label="已核验" value="1"></el-option>
              <el-option label="未核验" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3" :offset="22" class="menu-tree">
          <svg-icon icon-class="down_circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
          <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="460px">
        <el-table-column prop="bepsId" label="交易流水号" sortable width="200"></el-table-column>
        <el-table-column prop="MessageNum" label="报文标识号" sortable width="200"></el-table-column>
        <el-table-column prop="payerCount" label="付款人账号" sortable width="200"></el-table-column>
        <el-table-column prop="payerName" label="付款人名称" sortable width="150"></el-table-column>
        <el-table-column prop="verificateMark" label="核验标识" sortable width="120"></el-table-column>
        <el-table-column prop="AnswerLose" label="应答失败" sortable width="120"></el-table-column>
        <el-table-column prop="remainTerm" label="剩余期限" sortable width="120"></el-table-column>
        <el-table-column fixed="right" class="table-header-cell" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="checkDetail(scope.$index, tableData)" type="text" size="small">
              明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>
      </div>
    </el-form>

    <payment-check-detail-dialog ref="paymentCheckDetailDialog"></payment-check-detail-dialog>
  </div>
</template>

<script>
import paymentCheckDetailDialog from "./components/checkDetail";
export default {
  name: "BepsPaymentCheckBisHandle",
  components: {
    paymentCheckDetailDialog,
  },
  data() {
    return {
      currentPage4: 1, // 分页
      dialogVisible: false,
      form: {
        bepsId: "", // 交易流水号
        MessageNum: "", // 报文标识号
        payerCount: "", // 付款人账号
        payerName: "", // 付款人名称
        verifiFlag: "1", // 核验标识
        workDate: "", // 工作日期
      },

      tableData: [
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
        {
          bepsId: "124562346346234", // 交易流水号
          MessageNum: "12345678901111", // 报文标识号
          payerCount: "4355656557854678", // 付款人账号
          payerName: "张三", // 付款人名称
          verificateMark: "已核验", // 核验标识
          AnswerLose: "否", // 应答失败
          remainTerm: "99", // 剩余期限
        },
      ],
    };
  },

  methods: {
    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    // 重置
    reset() {
      this.resetForm("form");
    },

    // 详情
    checkDetail(index, rows) {
      console.log(index, "复核");
      console.log("this.$refs.paymentCheckDetailDialog", this.$refs.paymentCheckDetailDialog);
      this.$refs.paymentCheckDetailDialog.show();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClose(done) {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -20px;
  font-size: 28px;
}

.block {
  float: right;
}

.table-header-cell {
  background-color: #e7e7e7 !important;
  font-size: 12px !important;
  height: 70px !important;
}

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #e7e7e7;
  font-size: 12px;
  height: 40px;
}

.el-table .el-table__header-wrapper,
.el-table .el-table__fixed-header-wrapper {
  height: 40px;
}

.form-card {
  margin-bottom: 10px;
}

.el-table--mini th,
.el-table--mini td {
  padding: 0px 0;
}
</style>
